<template>
	<view class="main-class">
		<scroll-view class="scroll-container bg-grey animation-slide-left " scroll-y scroll-with-animation :class="showSearchModel?'':'paddig-top-70'"
			enable-back-to-top>
			<view class=" bg-grey padding-sm-sm">
				<view class="tui-flex tui-center" >
					<view class="tui-col-1 tui-center">
							<tui-icon name="search tui-flex" size="30" unit="rpx"></tui-icon>
					</view>
					<view class=" tui-flex tui-col-10" :class="showSearchModel?'tui-center':'tui-align-left'">
						<input @focus="toShowSearchFu" @input="toSearchFu"  class="input-search-placeholder tui-col-11 tui-input  round_view bg-white  tui-center " placeholder="搜索" v-model="searchKey"
						 >
						</input>
					</view>
					<view v-if="showSearchModel" class=" text-center text-green text-30 tui-col-1 animation-slide-right" @click=" toUnShowSearchFu ">取消</view>
				</view>
			</view>
			<view v-if="showSearchModel" class="animation-scale-up detail-view   padding-sm">
				<im-chatlist :searchKey="searchKey"></im-chatlist>
			</view>
			<view v-else class="magin-top-10 animation-scale-down detail-view  padding-sm">
				<im-chatlist></im-chatlist>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>

</style>
